<template>
  <Row :gutter="10">
    <i-col span="6">
      <Card>
        <Upload action="" :before-upload="beforeUpload">
          <Button icon="ios-cloud-upload-outline">上传Csv文件</Button>
          &nbsp;&nbsp;&nbsp;&nbsp;点击上传Csv文件
        </Upload>
        <p>util.js提供两个方法用来实现这个功能：</p>
        <p class="update-table-intro">
          <Icon style="margin-right: 10px" :size="10" type="md-heart" />
          <span class="code-high-line">getArrayFromFile </span>
          ：将Csv文件解析为二维数组
        </p>
        <p class="update-table-intro">
          <Icon style="margin-right: 10px" :size="10" type="md-heart" />
          <span class="code-high-line">getTableDataFromArray </span>
          ：将二维数组转为表格数据，具体请看文档
        </p>
      </Card>
    </i-col>
    <i-col span="18">
      <Table :height="500" :columns="columns" :data="tableData" />
    </i-col>
  </Row>
</template>

<script>
import { getArrayFromFile, getTableDataFromArray } from "@/libs/utils";
export default {
  name: "update_table_page",
  data() {
    return {
      columns: [],
      tableData: [],
    };
  },
  methods: {
    beforeUpload(file) {
      getArrayFromFile(file)
        .then((data) => {
          let { columns, tableData } = getTableDataFromArray(data);
          this.columns = columns;
          this.tableData = tableData;
        })
        .catch(() => {
          this.$Notice.warning({
            title: "只能上传Csv文件",
            desc: "只能上传Csv文件，请重新上传",
          });
        });
      return false;
    },
  },
};
</script>

<style>
.update-table-intro {
  margin-top: 10px;
}
.code-high-line {
  color: #2d8cf0;
}
</style>